window.addEventListener("load", function () {
	// 功能一：点击tab栏激活对应样式
	// 默认显示第一个
	$("#leftParticulars>section")[0].classList.add("on");
	tab("#rightNav p", "active");

	// 功能二：动态渲染详情区
	let dataList = [
		{
			category: "finance",
			img: "szyh.png",
			name: "苏州银行数据API服务系统",
			desc: "苏州银行的前身是江苏东吴农村商业银行股份有限公司，2011年经监管批准，由农村中小金融机构监管序列调整为中小商业银行监管序列。2019年8月2日，苏州银行登陆A股，为全国第33家、江苏省第9家上市银行。2020年3月9日，“2019年中国银行业100强榜单”发布，苏州银行排名第51位。",
		},
		{
			category: "finance",
			img: "hcfc2.png",
			name: "河北幸福消金三方数据管理平台",
			desc: "河北幸福消费金融股份有限公司是河北省首家批准成立的消费金融公司。公司坚持以“融入互联网生态，融入河北生态，融入股东生态”为主线，打造产品服务、内容服务和能力服务为核心目标，致力于打造一家以技术为驱动、以智慧金融和普惠金融为特色的公众公司。截至2019年底，幸福消金累计投放贷款近500亿元，全年新增270亿元。",
		},
		{
			category: "finance",
			img: "sznsyh.png",
			name: "苏州农商行数据敏捷共享平台",
			desc: "苏州农商银行是全国第四家A股上市的农商银行，也是银监会成立后在新监管框架下第一批挂牌开业的农村商业银行。近年来，苏州农商银行聚焦主责主业，以支农支小、服务地方经济建设为主要目标，践行了一条符合自身实际的差异化定位、特色化经营之路。在当下金融行业数字化转型的大潮中，苏州农商银行积极探索金融科技转型之道，运用互联网思维，通过智能化和不断迭代的服务，满足不同客户的多元化、个性化需求，实现差异化发展，走出自己的特色化之路。",
		},

		{
			category: "business",
			img: "zhylian.png",
			name: "中国银联便民缴费内容交换平台",
			desc: "中国银联（China UnionPay）成立于2002年3月，是经国务院同意，中国人民银行批准设立的中国银行卡联合组织，总部设于上海。截至2019年9月，中国银联已成为全球发卡量最大的卡组织，发行近80亿张银行卡。",
		},
		{
			category: "business",
			img: "zgtxfw.png",
			name: "中通服三方数据管理平台",
			desc: "本项目是建设中国通信服务股份有限公司上海分公司（以下简称“中通服”）的三方数据管理平台，通过智能数据管理平台的线上化系统，进行业务数据的有效管理，规范业务操作流程，防范业务风险，实现资源共享、高效一致的有效运作。",
		},
		{
			category: "business",
			img: "airbus.png",
			name: "空客VOOM BI分析系统",
			desc: "Voom 是一个由 Airbus 运营，方便、可靠的直升机订单、运营管理(B2C，B2B)平台，能给有需求的旅客提供便捷、快速的城市直升机服务。本项目涉及Voom的数据仓库和BI工具的建设，服务对象为Voom管理人员和运营人员，为Voom服务的管理决策，和日常运营的精细化改进提供数据支撑。",
		},

		{
			category: "government",
			img: "scm.png",
			name: "苏城码",
			desc: "中国银联（China UnionPay）成立于2002年3月，是经国务院同意，中国人民银行批准设立的中国银行卡联合组织，总部设于上海。截至2019年9月，中国银联已成为全球发卡量最大的卡组织，发行近80亿张银行卡。",
		},
		{
			category: "government",
			img: "sgaj.png",
			name: "大数据防线",
			desc: "华东某市公安局，高度重视智慧公安建设，依托大数据赋能警务实战。并在全国率先提出通过融合多源异构海量数据，进一步提升精准化研判、预判水平。并委托聚合数据帮助其建设智能化平台。",
		},
		{
			category: "government",
			img: "szfjg.png",
			name: "市域社会治理",
			desc: "华东某市获批全国首批市域社会治理现代化试点城市，紧密围绕中央、省、市决策部署，立足该市实际，突出问题导向，超前谋划、大胆探索，精准推进政法智能化深度应用，搭建统一集成、高效协同、市域一体的社会治理现代化综合指挥平台。",
		},
	];

	// 改造后的数据
	const contenData = [
		{
			title: "金融案列",
			subTitle: "Financial Case",
			data: [
				{
					category: "finance",
					img: "szyh.png",
					name: "苏州银行数据API服务系统",
					desc: "苏州银行的前身是江苏东吴农村商业银行股份有限公司，2011年经监管批准，由农村中小金融机构监管序列调整为中小商业银行监管序列。2019年8月2日，苏州银行登陆A股，为全国第33家、江苏省第9家上市银行。2020年3月9日，“2019年中国银行业100强榜单”发布，苏州银行排名第51位。",
				},
				{
					category: "finance",
					img: "hcfc2.png",
					name: "河北幸福消金三方数据管理平台",
					desc: "河北幸福消费金融股份有限公司是河北省首家批准成立的消费金融公司。公司坚持以“融入互联网生态，融入河北生态，融入股东生态”为主线，打造产品服务、内容服务和能力服务为核心目标，致力于打造一家以技术为驱动、以智慧金融和普惠金融为特色的公众公司。截至2019年底，幸福消金累计投放贷款近500亿元，全年新增270亿元。",
				},
				{
					category: "finance",
					img: "sznsyh.png",
					name: "苏州农商行数据敏捷共享平台",
					desc: "苏州农商银行是全国第四家A股上市的农商银行，也是银监会成立后在新监管框架下第一批挂牌开业的农村商业银行。近年来，苏州农商银行聚焦主责主业，以支农支小、服务地方经济建设为主要目标，践行了一条符合自身实际的差异化定位、特色化经营之路。在当下金融行业数字化转型的大潮中，苏州农商银行积极探索金融科技转型之道，运用互联网思维，通过智能化和不断迭代的服务，满足不同客户的多元化、个性化需求，实现差异化发展，走出自己的特色化之路。",
				},
			],
		},
		{
			title: "企业案列",
			subTitle: "Business Case",
			data: [
				{
					category: "business",
					img: "zhylian.png",
					name: "中国银联便民缴费内容交换平台",
					desc: "中国银联（China UnionPay）成立于2002年3月，是经国务院同意，中国人民银行批准设立的中国银行卡联合组织，总部设于上海。截至2019年9月，中国银联已成为全球发卡量最大的卡组织，发行近80亿张银行卡。",
				},
				{
					category: "business",
					img: "zgtxfw.png",
					name: "中通服三方数据管理平台",
					desc: "本项目是建设中国通信服务股份有限公司上海分公司（以下简称“中通服”）的三方数据管理平台，通过智能数据管理平台的线上化系统，进行业务数据的有效管理，规范业务操作流程，防范业务风险，实现资源共享、高效一致的有效运作。",
				},
				{
					category: "business",
					img: "airbus.png",
					name: "空客VOOM BI分析系统",
					desc: "Voom 是一个由 Airbus 运营，方便、可靠的直升机订单、运营管理(B2C，B2B)平台，能给有需求的旅客提供便捷、快速的城市直升机服务。本项目涉及Voom的数据仓库和BI工具的建设，服务对象为Voom管理人员和运营人员，为Voom服务的管理决策，和日常运营的精细化改进提供数据支撑。",
				},
			],
		},
		{
			title: "政策案列",
			subTitle: "Government Case",
			data: [
				{
					category: "government",
					img: "scm.png",
					name: "苏城码",
					desc: "中国银联（China UnionPay）成立于2002年3月，是经国务院同意，中国人民银行批准设立的中国银行卡联合组织，总部设于上海。截至2019年9月，中国银联已成为全球发卡量最大的卡组织，发行近80亿张银行卡。",
				},
				{
					category: "government",
					img: "sgaj.png",
					name: "大数据防线",
					desc: "华东某市公安局，高度重视智慧公安建设，依托大数据赋能警务实战。并在全国率先提出通过融合多源异构海量数据，进一步提升精准化研判、预判水平。并委托聚合数据帮助其建设智能化平台。",
				},
				{
					category: "government",
					img: "szfjg.png",
					name: "市域社会治理",
					desc: "华东某市获批全国首批市域社会治理现代化试点城市，紧密围绕中央、省、市决策部署，立足该市实际，突出问题导向，超前谋划、大胆探索，精准推进政法智能化深度应用，搭建统一集成、高效协同、市域一体的社会治理现代化综合指挥平台。",
				},
			],
		},
	];

	// 1.先声明一个空的html结构：用来储存section下面的标题部分
	let html = "";
	// 2.遍历contenData
	contenData.forEach(function (v) {
		// 4.再遍历contenData里面的每一个数组
		// 5.再声明一个空的html结构：用来储存imgs里面的数据
		let divHtml = "";
		v.data.forEach(function (item) {
			divHtml += `
			<div>
				<img src="../imgs/${item.img}" alt="图片加载失败" />
				<h4 class="fz-16">${item.name}</h4>
				<p class="fz-12 tHidden-4">${item.desc}</p>
				<a href="javascript:void 0" class="fz-12">了解详情</a>
			</div>
			`;
		});
		// 3.拼接html结构 将拼接好的结构放入指定位置
		/*第一次遍历的数据
			<h4>
				${v.title}
				<span>/${v.subTitle}</span>
			</h4>
		*/
		/*第二次遍历的数据
			<div class="flex-c-sb imgs">
				${divHtml}
			</div>
		*/
		html += `
			<h4>
				${v.title}
				<span>/${v.subTitle}</span>
			</h4>
			<div class="flex-c-sb imgs">
				${divHtml}
			</div> 
			`;
	});
	$("#contLt").innerHTML = html;

	/*
	function render(start, end) {
		let html = "";
		for (let i = start; i <= end; i++) {
			html += `
        <div>
            <img src="../imgs/${dataList[i].img}" alt="图片加载失败" />
            <h4 class="fz-16">${dataList[i].name}</h4>
            <p class="fz-12">${dataList[i].desc}</p>
            <a href="javascript:void 0" class="fz-12">了解详情</a>
        </div>    
            `;
		}
		return html;
	}
	$("section .imgs")[0].innerHTML = render(0, 2);
	$("section .imgs")[1].innerHTML = render(3, 5);
	$("section .imgs")[2].innerHTML = render(6, 8);
	*/

	/* dataList.forEach(function (v, i) {
		html += `
        <div>
            <img src="../imgs/${v.img}" alt="图片加载失败" />
            <h4 class="fz-16">${v.name}</h4>
            <p class="fz-12">${v.desc}</p>
            <a href="javascript:void 0" class="fz-12">了解详情</a>
        </div>    
            `;
	}); */

	// 功能三：将更多伙伴实现静态渲染
	const img = [
		"item01.svg",
		"item02.svg",
		"item03.svg",
		"item04.svg",
		"item05.svg",
		"item06.svg",
		"item07.svg",
		"item08.svg",
		"item09.svg",
	];
	img.forEach(function (v) {
		$("#more .particle").innerHTML += `
			<div>
				<img src="../imgs/more-partners-${v}" alt="" />	
			</div>
		`;
	});

	// 实现更多伙伴移入效果
	const imgs = [
		"zgyidong",
		"zhaoshang",
		"zgyinlian",
		"jingdong",
		"douyin",
		"meituan",
		"xiaomi",
		"more-partners-item08",
		"kuaishou",
	];
	$("#more .particle div").forEach(function (v, i) {
		// 鼠标移入时背景颜色变蓝，图片变白
		v.addEventListener("mouseover", function () {
			this.style.backgroundColor = "#016cfa";
			let imgUrl = this.firstElementChild.src;
			this.firstElementChild.src = imgUrl.replace(
				"more-partners-item0" + (i + 1),
				imgs[i]
			);
			oldUrl = imgUrl; //用一个变量保存原先的路径
		});
		// 鼠标移出时背景颜色变回原来的颜色，图片变为原来图片
		v.addEventListener("mouseout", function () {
			this.style.backgroundColor = "";
			this.firstElementChild.src = oldUrl;
		});
	});

	// 功能四：实现电梯效果
	$("#rightNav p").forEach(function (v, i) {
		v.addEventListener("click", function () {
			// 点击后根据一一对应的索引，找到对应的楼层标题
			const scrollY =
				$(".left>h4")[i].offsetParent.offsetTop + $(".left>h4")[i].offsetTop;
			// 再使用楼层标题的偏移高度offsetTop控制滚动条的滚动距离
			window.scrollTo({ left: 0, top: scrollY, behavior: "smooth" });
		});
	});

	//配置
	const config = {
		selector: "#bannerBg",
		vx: 4, //点x轴速度,正为右，负为左
		vy: 4, //点y轴速度
		height: 2, //点高宽，其实为正方形，所以不宜太大
		width: 2,
		count: 100, //点个数
		color: "121, 162, 185", //点颜色
		stroke: "130,255,255", //线条颜色
		dist: 6000, //点吸附距离
		e_dist: 20000, //鼠标吸附加速距离
		max_conn: 10, //点到点最大连接数
	};
	//调用
	CanvasParticle(config);

	// 回到顶部
	// 绑定点击事件
	$("span.iconfont").addEventListener("click", function () {
		window.scrollTo({
			top: 0,
			behavior: "smooth",
		});
	});
	// 判断滚动事件
	this.window.addEventListener("scroll", function () {
		if (window.scrollY < 500) {
			$("span.iconfont").classList.remove("on");
		} else if (window.scrollY > 500) {
			$("span.iconfont").classList.add("on");
		}
	});
});
